<!DOCTYPE HTML>
<html>
<head>
  <style>
    div {
      color:white;
      padding:10px;
      height:200px;
    }
    textarea{
      width:400px;
      height:200px;
    }
    .lineargradienthorz{
        background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#0099ff), to(#000));
		background-image: -moz-linear-gradient(0% 100% 0deg, #0099ff, #000);
    }
    .lineargradientangle{
		background-image: -webkit-gradient(linear, left top, right bottom, from(#0099ff), to(#000)); 
  		background-image: -moz-linear-gradient(left top 315deg, #0099ff, #000);
    }
    .radialgradient1{
		background-image: -webkit-gradient(radial, center center, 0, center center, 200, from(#0099FF), to(#000));
  		background-image: -moz-radial-gradient(center, circle closest-corner, #0099FF 0%, #000 100%);    
	}
	.radialgradient2{
		background-image: -webkit-gradient(radial, center center, 0, 150 150, 200, from(#0099FF), to(#000));

	}
  </style>
</head>
<body>
  <table width="100%">
   <tr>
     <td><h1>Example</h1></td>
     <td><h1>CSS Code</h1></td>
   </tr>
   <tr>
     <td>
     	<div class="lineargradienthorz">Linear Gradient</div>
     </td>
     <td>
     	<textarea>
.lineargradienthorz{
	background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#0099ff), to(#000));
	background-image: -moz-linear-gradient(0% 100% 0deg, #0099ff, #000);
}
		</textarea>
	</td>
   </tr>
   <tr>
     <td>
     	<div class="lineargradientangle">Linear Gradient at angle</div>
     </td>
     <td>
     	<textarea>
.lineargradientangle{
	background-image: -webkit-gradient(linear, left top, right bottom, from(#0099ff), to(#000)); 
	background-image: -moz-linear-gradient(left top 315deg, #0099ff, #000);
}
		</textarea>
	 </td>
   </tr>  
   <tr>
     <td>
     	<div class="radialgradient1">Radial Gradient</div>
     </td>
     <td>
     	<textarea>
.radialgradient1{
	background-image: -webkit-gradient(radial, center center, 0, center center, 200, from(#0099FF), to(#000));
	background-image: -moz-radial-gradient(center, circle closest-corner, #0099FF 0%, #000 100%);    
}
		</textarea>
	 </td>
   </tr>  
   <tr>
     <td>
     	<div class="radialgradient2">Radial Gradient center</div>
     </td>
     <td>
     	<textarea>
.radialgradient2{
	background-image: -webkit-gradient(radial, center center, 0, 150 150, 200, from(#0099FF), to(#000));

}
		</textarea>
	 </td>
   </tr>  

   </table>
</body>
</html>
